<template>
  <div class="app-container">
    <div class="content-box">
      <el-row :gutter="20">
        <el-col :span="24" class="order-box" style="padding: 0">
          <el-card class="box-card h350">
            <div slot="header" class="clearfix">
              <span>售后详情</span>
            </div>
            <div class="mytable">
              <table
                class="el-table__body"
                border="0"
                cellpadding="0"
                cellspacing="0"
              >
                <tbody>
                  <tr class="el-table__row">
                    <th style="width: 20%">退款单号</th>
                    <td style="width: 30%">{{ info.refund_sn }}</td>
                    <th style="width: 20%">订单编号</th>
                    <td style="width: 30%">{{ info.order.order_sn }}</td>
                  </tr>
                  <tr class="el-table__row">
                    <th>退款类型</th>
                    <td>{{ info.refund_type_text }}</td>
                     <th>申请时间</th>
                    <td>{{ info.createtime }}</td>
                  </tr>
                  <tr class="el-table__row">
                    <th>退款金额</th>
                    <td>￥{{ info.refund_price }}</td>
                    <th>退款状态</th>
                    <td>{{ info.status_text }}</td>
                  </tr>
                  <tr class="el-table__row">
                    <th>操作</th>
                    <td>
                      <el-button
                        type="primary"
                        size="small"
                        @click="examine(1, info.id)"
                        v-if="info.refund_status == 1"
                        v-hasPermi="['refund:check']"
                        >通过</el-button
                      >
                      <el-button
                        type="danger"
                        size="small"
                        @click="examine(2, info.id)"
                        v-hasPermi="['refund:check']"
                        v-if="info.refund_status == 1"
                        >驳回</el-button
                      >
                      <el-button
                        size="small"
                        v-if="info.refund_status == 5"
                        v-hasPermi="['refund:receipt']"
                        @click="confirmReceipt(info.id)"
                        >确认收货</el-button
                      >
                    </td>
                    <th></th>
                    <td></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <!-- <el-col :span="12" class="order-box">
          <el-card class="box-card h350">
            <div slot="header" class="clearfix">
              <span>支付信息</span>
            </div>
            <div class="mytable">
              <table
                class="el-table__body"
                border="0"
                cellpadding="0"
                cellspacing="0"
              >
                <tbody>
                  <tr class="el-table__row">
                    <th style="width: 20%">支付方式</th>
                    <td style="width: 30%">{{ info.pay_way }}</td>
                    <th style="width: 20%">支付时间</th>
                    <td style="width: 30%">{{ info.pay_time_text }}</td>
                  </tr>
                  <tr class="el-table__row">
                    <th>用户名</th>
                    <td>
                      {{
                        info.buyer && info.buyer.name ? info.buyer.name : "无"
                      }}
                    </td>
                    <th>真实姓名</th>
                    <td>
                      {{
                        info.buyer && info.buyer.real_name
                          ? info.buyer.name
                          : "无"
                      }}
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <th>电话号码</th>
                    <td>
                      {{
                        info.buyer && info.buyer.mobile
                          ? info.buyer.mobile
                          : "无"
                      }}
                    </td>
                    <th>身份证号</th>
                    <td>
                      {{
                        info.buyer && info.buyer.id_card_no
                          ? info.buyer.id_card_no
                          : "无"
                      }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col> -->
        <el-col :span="24" class="order-box">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>商品信息</span>
            </div>
            <el-table
              :data="info.goods_info"
              row-key="goods_sn"
              row-class-name="goods_table"
            >
              <el-table-column label="商品编码" align="center">
                <template slot-scope="goods">
                  <div>{{ goods.row.goods_sn }}</div>
                </template>
              </el-table-column>
              <el-table-column label="规格编码" align="center">
                <template slot-scope="goods">
                  <div>{{ goods.row.sku_unique }}</div>
                </template>
              </el-table-column>
              <el-table-column label="规格唯一值" align="center">
                <template slot-scope="goods">
                  <div>{{ goods.row.sku_unique }}</div>
                </template>
              </el-table-column>
              <el-table-column label="商品图片" align="center" width="100">
                <template slot-scope="goods">
                  <el-image
                    class="good_img"
                    :src="goods.row.goods_image"
                    :preview-src-list="[goods.row.goods_image]"
                  >
                  </el-image>
                </template>
              </el-table-column>

              <el-table-column label="商品名称" align="center">
                <template slot-scope="goods">
                  <div>{{ goods.row.goods_name }}</div>
                </template>
              </el-table-column>
              <!-- <el-table-column label="规格名称">
                <template slot-scope="goods">
                  <div>{{ goods.row.sku_name }}</div>
                </template>
              </el-table-column> -->
              <el-table-column width="80" label="退款数量" align="center">
                <template slot-scope="goods">
                  <div>{{ goods.row.refund_num }}</div>
                </template>
              </el-table-column>
              <el-table-column width="80" label="退款金额" align="center">
                <template slot-scope="goods">
                  <div>￥{{ goods.row.refund_price }}</div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12" class="order-box" v-if="info.logistics_info">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>收货地址信息</span>
            </div>
            <div class="mytable">
              <table
                class="el-table__body"
                border="0"
                cellpadding="0"
                cellspacing="0"
              >
                <tbody v-if="info.logistics_info">
                  <tr class="el-table__row">
                    <th class="">收货人</th>
                    <td rowspan="1" colspan="1">
                      {{ info.logistics_info.name }}
                    </td>
                    <th class="">联系电话</th>
                    <td rowspan="1" colspan="1">
                      {{ info.logistics_info.mobile }}
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <th style="width: 20%">收货地址</th>
                    <td style="width: 30%">
                      {{ info.logistics_info.province
                      }}{{ info.logistics_info.city
                      }}{{ info.logistics_info.district
                      }}{{ info.logistics_info.address }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" class="order-box" v-if="info.logistics_info">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>快递信息</span>
            </div>
            <div class="mytable">
              <table
                class="el-table__body"
                border="0"
                cellpadding="0"
                cellspacing="0"
              >
                <tbody v-if="info.logistics_info">
                  <tr class="el-table__row">
                    <th style="width: 20%">状态</th>
                    <th style="width: 30%">内容</th>
                    <th style="width: 30%">时间</th>
                  </tr>
                  <tr class="el-table__row">
                    <td>状态</td>
                    <td>内容</td>
                    <td>时间</td>
                  </tr>
                  <tr class="el-table__row">
                    <td>状态</td>
                    <td>内容</td>
                    <td>时间</td>
                  </tr>
                  <tr class="el-table__row">
                    <td>状态</td>
                    <td>内容</td>
                    <td>时间</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24" class="order-box">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>交流过程</span>
            </div>
            <div class="mytable">
              <table
                class="el-table__body"
                border="0"
                cellpadding="0"
                cellspacing="0"
              >
                <tbody>
                  <tr class="el-table__row">
                    <th class="">退款理由</th>
                    <td>
                      {{ info.refund_reason ? info.refund_reason : "无" }}
                    </td>
                  </tr>
                  <!-- <th class="">退款说明</th>
                  <td></td>
                  <th class="">退款图片</th>
                  <td>
                    <img></img>
                  </td> -->
                  <tr class="el-table__row" v-if="info.refund_status == 2">
                    <th class="">同意原因</th>
                    <td>{{ info.agree_reason ? info.agree_reason : "无" }}</td>
                  </tr>
                  <tr v-if="info.refund_status == 3">
                    <th class="">拒绝原因</th>
                    <td>
                      {{ info.refuse_reason ? info.refuse_reason : "无" }}
                    </td>
                  </tr>
                  <!-- <th class="">回寄备注</th>
                  <td></td>
                  <th class="">回寄图片</th>
                  <td></td> -->
                  <tr v-if="info.refund_status == 7">
                    <th class="">打款备注</th>
                    <td>{{ info.pay_remarks ? info.pay_remarks : "无" }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        class="popup"
      >
        <el-form-item
          label="同意理由"
          prop="agree_reason"
          v-if="form.check == 1"
        >
          <el-input v-model="form.agree_reason" placeholder="请输入同意理由" />
        </el-form-item>
        <el-form-item label="拒绝理由" prop="refuse_reason" v-else>
          <el-input v-model="form.refuse_reason" placeholder="请输入拒绝理由" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getOrder
// , Receipt, updatecheck
} from "@/api/chargebackList";
export default {
  name: "chargebackList",
  data() {
    return {
      id: 1,
      info: {},
      open: false,
      form: {},
      title: "",
      rules: [],
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getData();
  },
  methods: {
    // 同意或拒绝申请
    examine(data, id) {
      this.open = true;
      this.form.check = data;
      this.form.id = id;
      if (data == 1) {
        this.title = "同意申请";
      } else {
        this.title = "拒绝申请";
      }
    },
    // 确认收货
    confirmReceipt(id) {
      Receipt({ refund_id: id }).then((res) => {
        this.$router.replace({
          path: "/aftersale/index",
        });
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.form = {
        refuse_reason: "",
        agree_reason: "",
        id: "",
      };
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let info = {
            refund_id: this.form.id,
            check: this.form.check,
          };
          if (this.form.check == 1) {
            info.agree_reason = this.form.agree_reason;
          } else {
            info.refuse_reason = this.form.refuse_reason;
          }
          updatecheck(info).then((response) => {
            this.open = false;
            this.getData();
            this.$router.replace({
              path: "/aftersale/index",
            });
          });
        }
      });
    },
    getData() {
      getOrder({ refund_id: this.id }).then((response) => {
        this.info = response.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
table {
  width: 100%;
}
.order-box {
  margin-bottom: 20px;
}
.h350 {
  min-height: 350px;
}
.good_img {
  width: 100px;
  height: 100px;
}
.mytable {
  overflow: auto;
  border: 1px solid #f3f3f3;
  border-right: unset;
  .el-table__body {
    font-size: 12px;
    tr {
      th,
      td {
        padding: 10px;
        border-right: 1px solid #e6e6e6;
      }
      &:nth-child(2n + 1) {
        background: #f3f3f3;
      }
    }
  }
  .row1 {
    background: #f3f3f3;
  }
  .td,
  .th {
    padding: auto 5px;
    font-size: 12px;
    min-height: 40px;
    line-height: 40px;
    vertical-align: middle;
  }
  .td {
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
  }
  // .th {
  //   font-weight: bold;
  //   border-right: 1px solid #e6e6e6;
  // }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
